<template>
  <div class="articles">
    <div class="site-content animate">
      <!-- 文章目录 -->
      <div id="article-menus" v-show="tocs.length > 0">
        <div v-for="toc in tocs" :key="toc.href">
          <div style="line-height: 1.7em;">
            <a @click="scrollToPosition(toc.href)"
               v-html="toc.name"
               :style="'padding-left:'+(5+toc.h*5) +'px;font-weight:bold;font-size:'+(17-0.3*toc.h)+'px'"></a>
          </div>
        </div>
      </div>
      <main class="site-main">
        <article class="hentry">
          <div id="hentry-export">
            <!-- 文章头部 -->
            <header class="entry-header">
              <!-- 标题输出 -->
              <h1 class="entry-title">{{ article.title }}</h1>
              <hr>
              <div class="breadcrumbs">
                <el-row :gutter="24">
                  <el-col :span="21">
                    <div id="crumbs">最后更新时间：{{ article.updateTime }}</div>
                  </el-col>
                  <el-col :span="3">
                    <el-button size="mini" :autofocus="true" @click="exportToPdf(article.title)">导出</el-button>
                  </el-col>
                </el-row>
              </div>
            </header>
            <!-- 正文输出 -->
            <div>
              <mavon-editor
                  v-model="article.markerdownMessage"
                  :toolbarsFlag="false"
                  :subfield="false"
                  defaultOpen="preview"
                  ref="markdown"
              ></mavon-editor>
            </div>
            <!-- 文章底部 -->
            <section-title>
              <footer class="post-footer">
                <!-- 阅读次数 -->
                <div class="post-like">
                  <i class="iconfont iconeyes"></i>
                  <span class="count">{{ article.count }}</span>
                </div>
                <div class="donate" @click="showDonate=!showDonate">
                  <span>赏</span>
                  <ul class="donate_inner" :class="{'show':showDonate}">
                    <li class="wedonate"><img src="@/assets/images/weixin_pay.png">
                      <p>微信</p></li>
                    <li class="alidonate"><img src="@/assets/images/ali_pay.png">
                      <p>支付宝</p></li>
                  </ul>
                </div>
                <!-- 文章标签 -->
                <div class="post-tags">
                  <i class="iconfont iconcategory"></i>
                  <template v-for="item of article.tagList">
                    <el-tag type="info" size="small" style="margin-right: 10px">{{ item.tagName }}
                    </el-tag>
                  </template>
                </div>
              </footer>
            </section-title>

            <!--声明-->
            <div class="open-message">
              <p>声明：异色瞳的小猫博客|版权所有，违者必究|如未注明，均为原创|本网站采用<a
                  href="https://creativecommons.org/licenses/by-nc-sa/3.0/" target="_blank">BY-NC-SA</a>协议进行授权
              </p>
              <p>转载：转载请注明原文链接 - <a href="/">{{ article.title }}</a></p>
            </div>
          </div>

          <!--评论-->
          <div class="comments">
            <div>
              <comment-message-editor :inline="true" buttonText="留言"
                                      :placeholder="'留下你的评论吧'"></comment-message-editor>
            </div>
            <comment v-for="item in comments" :key="item.id" :comment="item">
              <template v-if="item.replyList.length">
                <comment v-for="reply in item.replyList" :key="reply.id" :comment="reply"></comment>
              </template>
            </comment>
          </div>
        </article>
      </main>
    </div>
  </div>
</template>

<script>
import sectionTitle from './components/section-title'
import comment from './components/comment'
import {findById, findCommentsByArticleId} from "@/api/blog/article"
import {offsetDomTop, scrollToTop} from "@/utils/index.js";
import commentMessageEditor from 'comment-message-editor'
import {htmlToPDF} from '@/utils/html2pdf'

export default {
  name: 'articles',
  data() {
    return {
      id: '',
      showDonate: false,
      comments: [],
      menus: [],
      content: '',
      article: {},
      // 目录
      tocs: []
    }
  },
  components: {
    sectionTitle,
    comment,
    commentMessageEditor
  },
  methods: {
    async exportToPdf(title) {
      console.log(title)
      await htmlToPDF('hentry-export', title)
    },
    getBookInfo() {
      findById(this.id).then((res) => {
        this.article = res.data
      })
    },
    getCommentsById() {
      findCommentsByArticleId(this.id).then((res) => {
        console.log(res)
        this.comments = res.data
      })
    },
    createdMenusNew() {
      const aArr = this.$refs.markdown.$refs.vShowContent.querySelectorAll("a");
      let tocs = [];
      for (var i = 0; i < aArr.length; i++) {
        if (aArr[i].id) {
          let href = aArr[i].id;
          let name = aArr[i].parentNode.innerText;
          tocs.push({
            // href: "#" + href, jqurey id选择器需要#
            h: Number(aArr[i].parentNode.tagName.substring(1)),
            href: href,
            name,
          });
        }
      }
      this.tocs = tocs;
    },
    scrollToPosition(id) {
      let position = offsetDomTop(document.getElementById(id));
      //160是因为有着导航条的高度
      position.top = position.top - 160;
      scrollToTop(position.top);
    }
  },
  mounted() {
    const that = this
    setTimeout(function () {
      that.createdMenusNew()
    }, 500)
  },
  created() {
    this.id = this.$route.query.id

    console.log()
    document.body.scollTop = 0
    this.getBookInfo()
    this.getCommentsById()
  }
}
</script>
<style scoped lang="less">
.site-content {
  position: relative;

  .site-main {
    padding: 80px 0 100px 0;
    width: 115%;
  }
}

#article-menus {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  border-radius: 3px;
  padding: 15px;
  width: 300px;
  transform: translateX(-120%) translateY(150px);
  font-size: 14px;
}

article.hentry {
  .entry-header {
    .entry-title {
      font-size: 23px;
      font-weight: 600;
      color: #737373;
      margin: 0.67em 0;

      &:before {
        content: "#";
        margin-right: 6px;
        color: #d82e16;
        font-size: 20px;
        font-weight: 600;
      }
    }

    hr {
      height: 1px;
      border: 0;
      background: #EFEFEF;
      margin: 15px 0;
    }

    .breadcrumbs {
      font-size: 16px;
      color: #D2D2D2;
      text-decoration: none;
      margin-bottom: 30px;
      margin-left: 20px;
    }
  }

  footer.post-footer {
    width: 100%;
    padding: 20px 10px;
    margin-top: 30px;
    height: 65px;
    position: relative;

    i {
      font-size: 18px;
      margin-right: 5px;
    }

    .post-like {
      float: right;
      margin: 7px 0 0 20px;
    }

    .post-share {
      float: right;
      list-style: none;
      margin-right: 20px;
    }

    .donate {
      float: left;
      line-height: 36px;
      border-radius: 100%;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border: 1px solid #2B2B2B;

      &:hover {
        border: 1px solid goldenrod;

        span {
          color: goldenrod;
        }
      }

      span {
        color: #2B2B2B;
        padding: 10px;
        position: relative;
        cursor: pointer;
      }

      .donate_inner {
        display: none;
        margin: 0;
        list-style: none;
        position: absolute;
        left: 80px;
        top: -40px;
        background: #FFF;
        padding: 10px;
        border: 1px solid #ddd;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
        border-radius: 3px;

        &.show {
          display: block;
        }

        li {
          float: left;
        }

        img {
          width: 100px;
        }

        p {
          text-align: center;
          font-size: 15px;
          color: #D2D2D2;
          line-height: 1rem;
        }
      }

      .donate_inner:after, .donate_inner:before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 45%;
        margin-left: -8px;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        border-right: 8px solid #fff;
      }

      .donate_inner:before {
        left: -1px;
        border-right: 8px solid #ddd;
      }

    }

    .post-tags {
      margin: 7px 0 0 20px;
      float: left;
      text-transform: uppercase;

      a:hover {
        color: #ff6d6d;
      }
    }
  }

  .open-message {
    margin: 50px 0;
    position: relative;
    background: #2B2B2B;
    padding: 10px 30px;
    border-radius: 3px;
    font-size: 14px;
    color: #fff;

    &:after {
      content: "";
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-bottom: 10px solid #2B2B2B;
      position: absolute;
      top: -8px;
      left: 48%;
    }

    p {
      margin: 10px 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    a {
      color: #A0DAD0;
      padding: 0 5px;
    }
  }
}

@media (max-width: 1490px) {
  #article-menus {
    display: none;
  }
}

@media (max-width: 800px) {
  #article-menus {
    display: none;
  }
}
</style>
